<template>
	<div class="show_link">
		<a href="https://element-plus.org/zh-CN/component/rate.html" target="_blank">https://element-plus.org/zh-CN/component/rate.html</a>
	</div>
	<h4 class="title_lv2">基础用法</h4>
	<el-rate 
	v-model="value1"
	allow-half
	clearable
	size="small"
	:void-icon="ChatRound"
	:icons="icons"
	show-text
	:texts="['oops', 'disappointed', 'normal', 'good', 'great']"
	:colors="['#409eff', '#67c23a', '#FF9900']"
	 />
	<!-- 页面代码 源码 -->
	<dropWrap key="oreo">
	  <pre><code class="language-js">{{ htmlCode }} </code></pre>
	</dropWrap>
	<!-- 页面代码 源码 -->

</template>

<script lang="ts" setup>
	import { ref, onMounted, nextTick } from "vue";
	import { ChatDotRound, ChatLineRound, ChatRound } from '@element-plus/icons-vue'
	import dropWrap from "../dropWrap.vue";
	import Prism from "prismjs";
	
	const value1 = ref(null)
	const icons = { 2: ChatRound, 4: { value: ChatLineRound, excluded: true }, 5: ChatDotRound }
	let htmlCode = ref<string>(`
		<el-rate
		v-model="value1" 
		allow-half //允许半星
		clearable //允许再次点击可清空
		size="small" //尺寸设置'large' | 'default' | 'small'
		:void-icon="ChatRound" //自定icon
		:icons="icons" //绑定自定义icon列表
		show-text //允许展示辅助文字
		:texts="['oops', 'disappointed', 'normal', 'good', 'great']" //辅助文字内容
		:colors="['#409eff', '#67c23a', '#FF9900']" //选择的icon颜色
		 />
		
		js部分
		import { ref, onMounted, nextTick } from "vue";
		import { ChatDotRound, ChatLineRound, ChatRound } from '@element-plus/icons-vue'
		
		const value1 = ref(null)
		const icons = { 2: ChatRound, 4: { value: ChatLineRound, excluded: true }, 5: ChatDotRound }
	`);

/*
生命周期
*/
onMounted(() => {
	nextTick(() => {
		Prism.highlightAll();
	});
});
</script>
<style scoped>
	.scrollbar-flex-content {
	  display: flex;
	}
	.scrollbar-flex-content .scrollbar-demo-item {
	  flex-shrink: 0;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 100px;
	  height: 50px;
	  margin: 10px;
	  text-align: center;
	  border-radius: 4px;
	  background: var(--el-color-danger-light-9);
	  color: var(--el-color-danger);
	}
	.scrollbar-demo-item {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 50px;
	  margin: 10px;
	  text-align: center;
	  border-radius: 4px;
	  background: var(--el-color-primary-light-9);
	  color: var(--el-color-primary);
	}
</style>